<template>
  <div v-loading="loading" element-loading-text="数据加载中...">
    <el-segmented
      v-model="activeTable"
      :options="statisticsOptions"
      style="margin-top: 20px"
      size="large"
      @change="handleSegChange"
    >
      <template #default="{ item }">
        <div>{{ item.label }}</div>
      </template>
    </el-segmented>
    <br />
    <el-segmented
      v-if="[0, 1].includes(activeTable)"
      v-model="timeChosen"
      :options="timeOptions"
      size="small"
      @change="handleTimeChange"
    >
      <template #default="{ item }">
        <div>{{ item.label }}</div>
      </template>
    </el-segmented>
    <el-segmented
      v-if="2 == activeTable"
      v-model="customerStatChosen"
      :options="customerStatTimeOptions"
      size="small"
      @change="handleCSTimeChange"
    >
      <template #default="{ item }">
        <div>{{ item.label }}</div>
      </template>
    </el-segmented>
    <el-segmented
      v-if="3 == activeTable"
      v-model="customerAlarmChosen"
      :options="customerAlarmTimeOptions"
      size="small"
      @change="handleCATimeChange"
    >
      <template #default="{ item }">
        <div>{{ item.label }}</div>
      </template>
    </el-segmented>
    <el-carousel
      ref="carouselRef"
      :autoplay="false"
      indicator-position="none"
      :loop="false"
      arrow="never"
      height="300px"
      :activeIndex="activeTable"
    >
      <el-carousel-item>
        <OrderTakers :data="orderTakersData" more @openMore="openTableData" />
      </el-carousel-item>
      <el-carousel-item>
        <Salesmen :data="salesmenData" more @openMore="openTableData" />
      </el-carousel-item>
      <el-carousel-item>
        <CustomerStat :data="customerStatData" more @openMore="openTableData" />
      </el-carousel-item>
      <el-carousel-item>
        <CustomerAlarm
          :data="customerAlarmData"
          more
          @openMore="openTableData"
        />
      </el-carousel-item>
    </el-carousel>

    <el-dialog v-model="open" append-to-body>
      <el-tabs v-model="activeTable" @tab-change="handleSegChange">
        <el-tab-pane label="接单员列表" :name="0"> </el-tab-pane>
        <el-tab-pane label="业务员业绩" :name="1"> </el-tab-pane>
        <el-tab-pane label="客户统计" :name="2"> </el-tab-pane>
        <el-tab-pane label="客户预警" :name="3"> </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="activeTime" type="card" @tab-change="modalTimeChange">
        <el-tab-pane
          v-for="(item, index) in activeTimeOptions"
          :key="index"
          :label="item.label"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>
      <template v-if="activeTable == 0">
        <OrderTakers :loading="loading" :data="orderTakersData" />
      </template>
      <template v-else-if="activeTable == 1">
        <Salesmen :loading="loading" :data="salesmenData" />
      </template>
      <template v-else-if="activeTable == 2">
        <CustomerStat :data="customerStatData" height="700" />
      </template>
      <template v-else>
        <CustomerAlarm :data="customerAlarmData" height="700" />
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import OrderTakers from "./OrderTakers.vue";
import Salesmen from "./Salesmen.vue";
import CustomerStat from "./CustomerStat.vue";
import CustomerAlarm from "./CustomerAlarm.vue";
import { computed } from "vue";
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const day = new Date().getDate();

const emit = defineEmits([
  "changeBeginDate",
  "changeMonthTypeCS",
  "changeMonthTypeCA",
]);
const props = defineProps({
  orderTakersData: {
    type: Object,
    default: () => [],
  },
  salesmenData: {
    type: Object,
    default: () => [],
  },
  customerStatData: {
    type: Object,
    default: () => [],
  },
  customerAlarmData: {
    type: Object,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: true,
  },
});
const state = reactive({
  timeChosen: 0,
  activeTable: 0,
  customerStatChosen: 0,
  customerAlarmChosen: 0,
  carouselRef: null,
  activeTime: 0,
  open: false,
  timeOptions: [
    { label: "一个月", value: 0 },
    { label: "三个月", value: 1 },
    { label: "半年", value: 2 },
    { label: "一年", value: 3 },
  ],
  customerStatTimeOptions: [
    { label: "一个月内", value: 0 },
    { label: "三个月内", value: 1 },
  ],
  customerAlarmTimeOptions: [
    { label: "一周内", value: 0 },
    { label: "一个月内", value: 1 },
    { label: "两个月内", value: 2 },
  ],
  statisticsOptions: [
    { label: "接单员业绩", value: 0 },
    { label: "业务员业绩", value: 1 },
    { label: "客户统计", value: 2 },
    { label: "客户预警", value: 3 },
  ],
});
const {
  timeChosen,
  timeOptions,
  customerStatChosen,
  customerAlarmChosen,
  statisticsOptions,
  carouselRef,
  customerAlarmTimeOptions,
  customerStatTimeOptions,
  activeTable,
  activeTime,
  open,
} = toRefs(state);

const activeTimeOptions = computed(() => {
  switch (activeTable.value) {
    case 0:
    case 1:
      return timeOptions.value;
    case 2:
      return customerStatTimeOptions.value;
    case 3:
      return customerAlarmTimeOptions.value;
  }
});

function getDate(m) {
  //减去月份后年份退位
  if (month - m < 1) {
    return new Date(`${year - 1}-${12 - (m - month)}-${day}`)
      .toLocaleDateString()
      .replace(/\//g, "-");
  } else {
    return new Date(`${year}-${month - m}-${day}`)
      .toLocaleDateString()
      .replace(/\//g, "-");
  }
}
function handleTimeChange(v) {
  let date = "";
  switch (v) {
    case 0:
      date = getDate(1);
      break;
    case 1:
      date = getDate(3);
      break;
    case 2:
      date = getDate(6);
      break;
    case 3:
      date = getDate(12);
      break;
    default:
      date = new Date().toLocaleDateString().replaceAll(",", "-");
      break;
  }
  emit("changeBeginDate", { date, tableIndex: activeTable.value });
}
//客户统计切换时间范围
function handleCSTimeChange(cur) {
  emit("changeMonthTypeCS", cur);
}
//客户预警切换时间范围
function handleCATimeChange(cur) {
  emit("changeMonthTypeCA", cur);
}
function modalTimeChange(v) {
  switch (activeTable.value) {
    case 0:
    case 1:
      timeChosen.value = v;
      handleTimeChange(v);
      break;
    case 2:
      customerStatChosen.value = v;
      //上下时间选择范围不一样，避免activeTime越界
      if (![0, 1].includes(v)) {
        handleCSTimeChange(0);
        activeTime.value = 0;
      } else {
        handleCSTimeChange(v);
      }
      break;
    case 3:
      customerAlarmChosen.value = v;
      if (![0, 1, 2].includes(v)) {
        handleCATimeChange(0);
        activeTime.value = 0;
      } else {
        handleCATimeChange(v);
      }
      break;
  }
}
function handleSegChange(cur) {
  carouselRef.value.setActiveItem(cur);
}
function openTableData() {
  open.value = true;
  activeTable.value = activeTable.value;
}
</script>
